<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }
        
        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>使用dom节点生成动态表单</h1>
        <label for="">行：</label>
        <input type="text" id="row">
        <label for="">列：</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="点击生成">

        <div id="out">
            <table>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <script>
        // 第一步先获取元素
        var btn = document.querySelector('#btn')
        var row = document.querySelector('#row')
        var col = document.querySelector('#col')
        var out = document.querySelector('#out')
        var table = document.querySelector("table")
        var tbody = document.querySelector('tbody')
            // 获取输入框的值
        var row1 = row.value;
        var col1 = col.value;

        // 获取点击事件
        btn.onclick = function() {

            // 获取输入框的值
            var row1 = row.value;
            var col1 = col.value;

            // 事件委托给父元素tbody
            out.onclick = function(e) {
                // 判断是不是复制按钮，实现克隆
                if (e.target.className === 'fuzhi') {
                    // 克隆tr
                    var newTr = e.target.parentNode.parentNode.cloneNode(true);
                    tbody.appendChild(newTr)
                }
                // 判断点击的时候是不是删除按扭
                if (e.target.className === 'delete') {
                    // 把按钮的父元素的父元素td的tr删除
                    e.target.parentNode.parentNode.remove();
                }
            }

            // 循环生成行和列  外循环为行   内循环为列
            for (var i = 0; i < row1; i++) {
                var tr = document.createElement('tr')
                if (i % 2 == 0) {
                    tr.style.background = '#ccc'
                }
                // 循环生成列
                for (var j = 0; j < col1; j++) {
                    var td = document.createElement('td')
                        // 在表格上加上内容
                    td.innerHTML = "单元格" + j + i
                        // 把td放到tr里面
                    tr.appendChild(td);
                }
                // 在最后一列加上复制和删除按钮
                // 添加最后一列td
                var td2 = document.createElement('td')
                    // 添加按钮
                var fuZhi = document.createElement('button')
                    // 给元素绑定class名 添加复制按钮
                fuZhi.className = 'fuzhi';
                fuZhi.innerHTML = "复制";
                // 添加删除按钮
                var delEte = document.createElement('button')
                delEte.className = 'delete'
                delEte.innerHTML = '删除'
                    // 把删除和复制按钮添加到td
                td2.appendChild(fuZhi);
                td2.appendChild(delEte);
                // 把新的td放到tr里面
                tr.appendChild(td2)
                tbody.appendChild(tr);

            }
        }
    </script>
</body>

</html>